<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <script src="static/js/jquery.js"></script>
    <style>
        body {
            background: url(static/images/image02.png) no-repeat center center fixed;
            background-size: cover;
        }

        #login-box{
            width:30%;
            height:auto;
            margin:0 auto ;
            margin-top:5%;
            text-align:center;
            background:#00000060;
            padding:20px 50px;
        }
        form{
            color: black;
            font-size: 18px;
            font-weight: bolder;
        }
        #login-box h1{
            color: yellow;
        }
        #login-box .form .item{
            margin-top:15px;
        }
        #login-box .form .item i{
            font-size:18px;
            color:#fff;
        }
        #login-box .form .sex {
            position: relative;
            left: -55px;
            margin-left: -3px;
        }
        #login-box .form .item:not(.sex) input{
            width:180px;
            font-size:15px;
            border:0;
            border-bottom:2px solid #fff;
            padding:5px 10px;
            background:#ffffff00;
            color:#fff;
        }
        #login-box 	button{
            margin-top:20px;
            width:190px;
            height:30px;
            font-size:20px;
            font-weight:700;
            color:#fff;
            background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
            border:0;
            border-radius:15px;
        }

        .register{
            display: block;
            margin-top: 12px;
        }

        a{
            text-decoration: none;/*去掉超链接的下划线*/
            font-size: 15px;/*设置超链接的字体为15px*/
            list-style: none;
            color:purple;
        }
        #login-box a:hover{
            color: yellow;/*鼠标悬停时的字体颜色*/
            font-size: 20px;/*鼠标悬停时的字体大小是20px*/
        }
    </style>
</head>

<script>
    // 注册前进行简单的前端校验
    function myCheck() {
        let b1 = /^\d{10}$/.test($("#loginName").val());
        let b2 = /^\d{6}$/.test($("#loginPwd").val());
        let b3 = /^\d{6}$/.test($("#loginPwd2").val());
        let b4 = /^.{1,20}$/.test($("#name").val());
        let b5 = /^\d+$/.test($("#age").val());
        return (b1 && b2 && b3 && b4 && b5);
    }

    // 注册前进行简单的前端校验
    function checkPwd() {
        if ($("#loginPwd").val() === $("#loginPwd2").val()) {
            return true;
        } else {
            return false;
        }
    }

    // 执行注册功能操作
    $(function () {
        $("#btn").click(function () {
            if (myCheck()) {
                if (checkPwd()) {
                    $.post("/anyview/user/register", $("#registerForm").serialize(), function (data) {
                        if(data.success){
                            alert("注册成功！");
                            window.location.href="Login.html";
                        }else {
                            alert(data.message);
                        }
                    });

                } else {
                    alert("您输入的两次密码不匹配！");
                }
            } else {
                alert("您输入的数据与所需要的格式不匹配！")
            }
        });
    });
</script>

<body>

<!--注册界面的最大div-->
<div id="login-box">
    <form method="post" id="registerForm">
        <div class="form">
            <h1>Register Interface</h1>
            <div class="item">
                <i class="fa fa-github-alt" style="font-size:24px"></i>
                学号：<input type="text" name="num" id="loginName" placeholder="请输入你的学号"
                            required>
            </div>
            <div class="item">
                <i class="fa fa-search" style="font-size:24px"></i>
                登录密码：<input type="password" name="password" id="loginPwd" placeholder="输入密码"
                            required>
            </div>
            <div class="item">
                <i class="fa fa-search" style="font-size:24px"></i>
                确认密码：<input type="password"  id="loginPwd2" placeholder="请您确认密码"
                            required>
            </div>
            <div class="item">
                <i class="fa fa-search" style="font-size:24px"></i>
                您的姓名：<input type="text" name="name" id="name" placeholder="请输入您的姓名" required>
            </div>
            <div class="item sex">
                <i class="fa fa-github-alt" style="font-size:24px"></i>
                您的性别：
                <input type="radio" name="sex" value="1" checked>男
                <input type="radio" name="sex" value="2">女
            </div>
            <div class="item">
                <i class="fa fa-search" style="font-size:24px"></i>
                您的电话：<input type="text" name="telephone" id="age" placeholder="请输入您的电话" required>
            </div>
            <div class="item sex">
                <i class="fa fa-github-alt" style="font-size:24px"></i>
                您的年级：
                <input type="radio" name="grade" value="1" checked>大一
                <input type="radio" name="grade" value="2">大二
                <input type="radio" name="grade" value="3">大三
                <input type="radio" name="grade" value="4">大四
            </div>
        </div>
        <span style="color: #ff0000;font-size: 12px"></span>
    </form>
    <button id="btn">Register</button>
    <a href="Login.html" class="register">已经注册，立即登录</a>
</div>

</body>
</html>